<template>
	<view class="post">
		<view class="post-header">
			<view class="post-time">
			 <view class="value">
			 	<biaofun-datetime-picker
			 		placeholder="请选择开始时间"
			 		defaultValue="2020"
			 		start="2000"
			 		end="2100"
			 		fields="year"
			 		@change="changeDatetimePicker"
			 	></biaofun-datetime-picker>
			 </view>
			 <image src="../../../static/images/xia_icon.png" style="width: 10px;height: 6px;"></image>
			</view>
			<view style="width: 50px;text-align: right;"  @click="hanldidealHome()">
				<image src="../../../static/images/gengduo.png" style="width: 20px;height: 4px;"></image>
			</view>
		</view>
		
		
	    <view class="post-con" v-for="(item,index) in orderList" :key="index" @click="hanldFriendsJiaInfo(item)">
			<view style="width: 30%;font-weight: bold; padding-right: 10px;">
				<text style="font-size: 27px;">{{item.create_time.substring(8,10)}}</text>{{item.create_time.substring(6,7)}}月
			</view>
			<view style="display: flex; flex-direction: column;width: 100%;">
				<view class="con-bg">
					<image :src="item.atlas[0]" style="width: 80px;height: 80px;"></image>
					<view class="con-wrapper">
						<view class="con-text">{{item.content}}</view>
						<view class="con-num">共{{item.atlas.length}}张</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more
		:status="loadStatus"
		></uni-load-more>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		data() {
			return {
				loadStatus: 'more',
				page: 1,
				orderList:'',
				year:'2020'
			}
		},
	onShow(){
		this.page=1;
		this.gettShopOrder(true)
	},
	onLoad(){
		// this.page=1;
		// this.gettShopOrder()
	},
		onReachBottom () {
			if (this.loadStatus === 'more') {
				this.gettShopOrder()
			}
		},
		components: {uniLoadMore,biaofunDatetimePicker},
		methods: {
		//选择时间
		changeDatetimePicker(date) {
			this.year = date.YYYY;
			this.page = 1;
			this.gettShopOrder(true)
			console.log('选择的日期时间数据：', this.year);
		},
		//跳转活动
		hanldidealHome(){
			uni.navigateTo({
			  url:'/pages/member/messageList/messageList'
			})
		},
		//跳转我的发帖详情
		hanldFriendsJiaInfo(item) {
			let aa = item;
			let bb = JSON.stringify(aa)
			let cc = encodeURIComponent(bb);
	
			uni.navigateTo({
				url: `/pages/Friendsjia/FriendsJiaInfo?address=${cc}`
			})
		},
		gettShopOrder(type) {
			const params = {
				owner:1,
				year:this.year,
				page: this.page
			}
			this.loadStatus = 'loading'
			this.$http.get('/moments/list',{params: params}).then((response) => {
				const res = response.data;
				console.log(res)
				if (res.code==0) {
					if (this.page > res.data.last_page) {
						// 没有数据了
						this.loadStatus = 'noMore'
					} else {
						// 未加载完毕
						this.loadStatus = 'more'
						this.page ++
					}
					console.log(type)
					if(type){
						this.orderList = res.data.data
					}else{
						this.orderList = [...this.orderList, ...res.data.data];
					}
				} else {
				}
			})
		}
		
		}

	}
</script>

<style>
		
	.post>>>.uni-picker-container>.uni-picker-action-confirm{
		    color: #09BB07 !important;
	}
	.post{
		background-color: #fff;
		width: 100%;
	}
	.post-time{
		color: #999999;
		font-size: 13px;
		display: flex;
		flex-direction: row;
		    align-items: center;
	}
.post-header{
	display: flex;
	flex-direction: row;
	height:28px;
	background:linear-gradient(270deg,rgba(245,245,245,0) 0%,rgba(245,245,245,1) 100%);
	align-items: center;
	justify-content: space-between;
	padding: 0 17px;
}
.post-con{
	display: flex;
	flex-direction: row;
	padding: 24px 17px 0 17px;
}
.con-text{
	font-size: 16px;
	color: #333333;
	
	       overflow: hidden;  /** 隐藏超出的内容 **/
	       word-break: break-all;
	       text-overflow: ellipsis; /** 多行 **/
	       display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	       -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	       -webkit-line-clamp: 2; /** 显示的行数 **/
}
.con-wrapper{
	    padding-left: 6px;
		    width: 70%;
}
.con-num{
	color: #999999;
	font-size: 13px;
}
.con-bg{
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

</style>
